<template>
  <div class=" com_echarts" >
    <div class="chart-title">
        <img src="../../../assets/images/screen/health_resource/FilletRectangle.png" alt="">
        <p>住院病人次均医药费用</p>
    </div>
        <div class="middle_right_bar" id="middle_right_bar"></div>
        <div class="middle_right_chart_box">
            <div class="liquidFill_box">
                <div class="liquidFill_first" id="right_liquidFill_first"></div>
                <div class="liquidFill_second" id="right_liquidFill_second"></div>
            </div>
        </div>
  </div>
</template>

<script>
import echarts from 'echarts';
import echartsrender from '../../../assets/js/jquery.echarts';
export default {
  name: 'middle_right_bar',
  data () {
    return {
        id:"middle_right_bar"
    }
  },
  created () {

  },
  mounted(){
    this.initLiquidFill_first();
    this.initLiquidFill_second();
    this.initbar();
  },
  methods:{
    initbar(){
        let that = this;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(this.id));
    
        // Generate data
        var category = [];
        var dottedBase = +new Date();
        var lineData = [];
        var barData = [];

        for (var i = 0; i < 12; i++) {
            var date = new Date(dottedBase += 1000 * 3600 * 24);
            category.push([
                date.getFullYear(),
                date.getMonth() + 1,
                date.getDate()
            ].join('-'));
            var b = (Math.random() * 200).toFixed(2);
            var d = Math.random() * 200;
            barData.push(b)
            lineData.push(d + b);
        }
        

        var option = {
            grid:{
                left:'2%',
                right:'0%',
                top:'0%',
                height:'85%'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true,
                        backgroundColor: '#333'
                    }
                },
                formatter:'{b}<br/>{a}:{c}'
            },
            legend: {
                show:false,
                data: ['line', 'bar'],
                textStyle: {
                    color: '#ccc'
                }
            },
            xAxis: {
                data: ['2010年','2011年','2012年','2013年','2014年','2015年','2016年','2017年','2018年'],
                axisLine: {
                    show: false,
                    lineStyle:{
                    color:'#4EB5D6',
                    type:'solid',
                    width:1
                    }
                },
                axisTick: {
                    show: false
                },
                //  改变x轴字体颜色和大小
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#bacbe7'
                    },
                    margin:4,
                    interval: '0',
                    // formatter: '{value} '
                }
            },
            yAxis: {
                splitLine: {show: false},
                //  改变x轴字体颜色和大小
                axisLabel: {
                    show: false,
                    textStyle: {
                    color: '#bacbe7'
                    }
                },
                splitLine: {
                    show:false,
                    lineStyle: {
                    color: '#39517D'
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle:{
                    color:'#4EB5D6',
                    type:'solid',
                    width:1
                    }
                },
                axisTick:{
                    show:false
                }
            },
            series: [ 
                {
                    name: '次均医药费用',
                    type: 'bar',
                    symbol: 'rect',
                    itemStyle: {
                        normal: {
                            color: '#36D7B6'
                        }
                    },
                    barGap: '-100%',
                    barWidth: 10,
                    z: -10,
                    data: barData
                },
                {
                    name: 'XX',
                    type: 'pictorialBar',
                    symbol: 'rect',
                    itemStyle: {
                        normal: {
                            color: '#000E3B'
                        }
                    },
                    symbolRepeat: true,
                    symbolSize: [12, 4],
                    symbolMargin: 4,
                    z: -10,
                    data: barData
                },
                {
                    name: 'line',
                    type: 'bar',
                    barGap: '-100%',
                    barWidth: 10,
                    itemStyle: {
                        normal: {
                            color: '#0F445C'
                        }
                    },
                    z: -12,
                    data: [350,350,350,350,350,350,350,350,350,350,350,350]
                }, 
                {
                    name: 'dotted',
                    type: 'pictorialBar',
                    symbol: 'rect',
                    itemStyle: {
                        normal: {
                            color: '#000E3B'
                        }
                    },
                    symbolRepeat: true,
                    symbolSize: [12, 4],
                    symbolMargin: 4,
                    z: -10,
                    data: [350,350,350,350,350,350,350,350,350,350,350,350]
                }
            ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    },
    initLiquidFill_first(){
                let that = this;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("right_liquidFill_first"));

        var value = 0.053
        var data = []
            data.push(value)
            data.push(value)
            data.push(value)
            data.push(value)
            data.push(value)
        var option = {
            title: {
                text: '当年价格上涨',
                left: 'center',
                top:'0',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 14,
                    color: 'rgba(255,255,255,0.7)'
                }
            },
            series: [{
                type: 'liquidFill',
                radius: '70%',
                data: data,
                backgroundStyle: {
                    borderWidth: 1,
                    borderColor: 'rgb(255,0,255,0.9)',
                    color: 'rgb(255,0,255,0.01)'
                },
                center: ['50%', '60%'],
                label: {
                    normal: {
                        formatter: value * 100 + '%',
                        textStyle: {
                            fontSize: 14
                        }
                    }
                }
            }]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    },
    initLiquidFill_second(){
        let that = this;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("right_liquidFill_second"));

        var value = 0.031
        var data = []
            data.push(value)
            data.push(value)
            data.push(value)
            data.push(value)
            data.push(value)
        var option = {
            title: {
                text: '可比价格上涨',
                left:'center',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 14,
                    color: 'rgba(255,255,255,0.7)'
                }
            },
            series: [{
                type: 'liquidFill',
                radius: '70%',
                data: data,
                backgroundStyle: {
                    borderWidth: 1,
                    borderColor: '#FF4343',
                    color: 'rgb(255,0,255,0.01)'
                },
                center: ['50%', '60%'],
                label: {
                    normal: {
                        formatter: value * 100 + '%',
                        textStyle: {
                            fontSize: 14
                        }
                    }
                }
            }]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
  }
}
</script>
<style lang='scss'  rel="stylesheet/scss" scoped>
.com_echarts{
    width:100%;
    height:100%;
}
.chart-title{
    img{
        float: left;
        width: 6px;
        height: auto;
        margin-left: 5px;
        margin-top: 5px;
    }
    p{
        font-size: 12px;
        color: #58ADE3;
        line-height: 2.5;
        margin-left: 15px;
    }
}
.middle_right_chart_box{
    width:30%;
    height:86%;
    float: left;
}
.liquidFill_box{
    width:100%;
    height:100%;
    float: left;
}
.liquidFill_box .liquidFill_first,.liquidFill_box .liquidFill_second{
    width:100%;
    height:50%;
    float: left;
}
.middle_right_bar{
    width:69%;
    height:86%;
    float: left;
}
</style>
